import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import { ExclamationCircleFilled } from "@ant-design/icons";
import GoBack from '@/components/TheGoBack'

import { apiDynamicCommentsDetail, apiDynamicCommentsAudit } from '@/request/petCircleUtil/comments'
import _ from 'lodash';

import { Input } from "antd";
const { TextArea } = Input;

class Comments extends React.Component {
    state = {
        storeId: "",
        textArea: "",
        columns: [
            {
                title: "编号",
                dataIndex: "petCommentsId",
                key: "petCommentsId",
            },
            {
                title: "用户昵称",
                dataIndex: "nickName",
                key: "nickName",
                render: (_, render) => {
                    return <div>{render.nickName}{render.reviewNickName && <>&nbsp;&nbsp;<span style={{ color: "#0076f6" }}>回复</span>&nbsp;&nbsp;{render.reviewNickName}</>}</div>
                }
            },
            {
                title: "评论内容",
                dataIndex: "commentsText",
                key: "commentsText",
            },
            {
                title: "点赞数",
                dataIndex: "likeNum",
                key: "likeNum",
                sorter: true,
            },
            {
                title: "省",
                dataIndex: "province",
                key: "province",
            },
            {
                title: "创建时间",
                dataIndex: "createTime",
                key: "createTime",
                sorter: true,
                // render: (_, render) => {
                //     return render.startTime + " - " + render.endTime
                // }
            },
            {
                title: "敏感词",
                dataIndex: "sensitiveWords",
                key: "sensitiveWords",
            },
            {
                title: "审核状态",
                dataIndex: "auditState",
                key: "auditState",
                render: (text, record) => {
                    let label = ''
                    switch (text) {
                        case "1":
                            label = "通过"
                            break;
                        case "0":
                            label = "驳回"
                            break;
                        case "2":
                            label = "待审核"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },
            {
                title: "审核时间",
                dataIndex: "auditTime",
                key: "auditTime",
            },
            {
                title: "审核理由",
                dataIndex: "auditReason",
                key: "auditReason",
            },
            {
                title: "审核",
                fixed: "right",
                width: 200,
                render: (_, render) => {
                    return (
                        <div>
                            {/* render.auditState == 2  待审核状态两个按钮同时显示 */}
                            {
                                (render.auditState == 0 || render.auditState == 2) &&
                                <TheButton onClick={() => this.audit("通过", render.petCommentsId)}>通过</TheButton>
                            }
                            {
                                (render.auditState == 1 || render.auditState == 2) &&
                                <TheButton onClick={() => this.audit("驳回", render.petCommentsId)}>驳回</TheButton>
                            }
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        visible: false,
        total: 0,
        form_show: true,
        stopReason: '',
    };

    componentDidMount() {
        const { id } = this.props.match.params
        this.setState({
            petCommentsId: id

        }, () => this.getData())
        this.onColumnsFilter(this.state.columns)

    };
    audit(title, petCommentsId) {
        this.setState({ modelTitle: title, visible: true, storeId: [petCommentsId] })
    }
    // 获取表格数据
    getData = async (values) => {
        let { pageNo, pageSize } = this.state.pageData

        let params = {
            pageNo,
            pageSize,
            petCommentsId: this.state.petCommentsId,
        }
        if (values) {
            params = { ...params, ...values }
        }
        let res = await apiDynamicCommentsDetail({
            ...params
        })
        if (res.code === 0 && res.data) {
            this.setState({
                dataSource: res.data,
                pageData: {
                    pageNo: res.pageNo,
                    pageSize: res.pageSize
                },
                total: res.totalCount,
            })
        }

    };
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };


    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }
    handleCancel = () => {
        this.setState({ visible: false, storeId: '' });
    };
    handleOk = async () => {
        const { textArea, modelTitle, storeId } = this.state
        if (!textArea) {
            return React.$message({
                type: 'error',
                content: `请输入${modelTitle}原因`
            })
        } else {
            const auditType = modelTitle === "驳回" ? '0' : '1'
            let res = await apiDynamicCommentsAudit({ dataIdList: storeId, auditReason: textArea, dataType: "2", auditType })
            if (res.code === 0) {
                this.setState({ visible: false }, () => {
                    this.getData()
                });
            }
        }
    };
    sorterFun = (pagination, filters, sorter) => {
        console.log(sorter.order);
        let sortType = sorter.order // 排序类型，正序/倒叙/不排序
        if (sortType) {
            this.getData({[sortType === 'ascend' ? 'orderByAsc' : 'orderByDesc']:sorter.field})
        } else {
            this.getData()
        }
    }
    render() {
        const {
            dataSource,
            pageData: { pageNo, pageSize },
            total,
            newColumns,
            visible,
            modelTitle,
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <GoBack history={this.props.history} title="评论详情" />
                <TheTable
                    // scroll={{ x: "max-content", y: '63vh' }}
                    columns={newColumns}
                    dataSource={dataSource}
                    onChange={this.sorterFun}
                    rowKey={'configCarouselId'}
                />
                <ThePagination
                    pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                <TheDialog
                    title={
                        <div>
                            <ExclamationCircleFilled
                                style={{ color: "#FAAD14", marginRight: 10 }}
                            />
                            {'输入' + modelTitle + '原因'}
                        </div>
                    }
                    width={400}
                    visible={visible}
                    handleCancel={this.handleCancel}
                    handleOk={this.handleOk}
                >
                    <TextArea
                        onChange={(e) => this.setState({
                            textArea: e.target.value
                        })}
                        allowClear
                        autoSize={{ minRows: 6, maxRows: 6 }}
                        // maxLength={20}
                        showCount
                    />
                </TheDialog>
            </div>
        );
    }
}

export default Comments;
